<template>
  <BaseModal
    v-model="visible"
    :title="title"
    size="md"
    @close="handleClose"
  >
    <div class="inventory-modal">
      <p class="modal-text">
        为 <strong>{{ template?.name }}</strong> 增加库存
      </p>
      
      <div class="form-group">
        <label class="form-label">增加数量 *</label>
        <BaseInput
          v-model.number="amount"
          type="number"
          placeholder="请输入增加的库存数量"
          :min="1"
          required
        />
      </div>
      
      <div class="current-inventory">
        <span>当前库存：</span>
        <strong>{{ template?.inventory || 0 }}</strong>
      </div>
    </div>
    
    <template #footer>
      <BaseButton type="secondary" @click="handleClose">
        取消
      </BaseButton>
      <BaseButton 
        type="primary" 
        :loading="loading"
        @click="handleSubmit"
      >
        确认增加
      </BaseButton>
    </template>
  </BaseModal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { BaseModal, BaseInput, BaseButton } from '@/components/common'
import type { CouponTemplate } from '@/services/coupon'

interface Props {
  modelValue: boolean
  template: CouponTemplate | null
  loading?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'submit', amount: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const visible = ref(false)
const amount = ref<number>(0)

const title = '增加库存'

watch(() => props.modelValue, (newValue) => {
  visible.value = newValue
  if (newValue) {
    amount.value = 0
  }
})

watch(visible, (newValue) => {
  emit('update:modelValue', newValue)
})

const handleClose = () => {
  visible.value = false
}

const handleSubmit = () => {
  if (!amount.value || amount.value <= 0) {
    alert('请输入有效的库存数量')
    return
  }
  emit('submit', amount.value)
}
</script>

<style scoped>
.inventory-modal {
  padding: 8px 0;
}

.modal-text {
  margin: 0 0 20px 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.current-inventory {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

.current-inventory strong {
  color: var(--text);
  font-size: 18px;
}
</style>